<script setup>
import { reactive, ref } from "vue";

import { CaretTop, CaretBottom } from '@element-plus/icons-vue';

const props = defineProps({
  info: Object
})

const editMQTTWill = ref(false)
</script>

<template>
  <el-form-item label="客户端ID">
    <el-input v-model="props.info.clientId" />
  </el-form-item>
  <el-form-item label="服务器地址">
    <el-input v-model="props.info.host" class="server-ip" placeholder="请输入服务器地址">
      <template #prepend>
        <el-select v-model="props.info.comType" style="width: 96px">
          <el-option label="mqtt://" value="mqtt" />
          <el-option label="mqtts://" value="mqtts" />
          <el-option label="ws://" value="ws" />
          <el-option label="wss://" value="wss" />
        </el-select>
      </template>
      <template #append>
        <span class="ip-separator">:</span>
        <el-input-number v-model="props.info.port" placeholder="端口号" controls-position="right" style="width: 108px;" />
      </template>
    </el-input>
  </el-form-item>
  <el-form-item label="用户名">
    <el-input v-model="props.info.username" />
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="props.info.password" />
  </el-form-item>
  <el-button 
    link :icon="editMQTTWill ? CaretTop : CaretBottom" 
    style="margin-bottom: 18px;"
    @click="editMQTTWill = !editMQTTWill"
  >遗嘱配置</el-button>
  <Transition name="will">
    <div class="will-set" v-show="editMQTTWill">
      <el-form-item label="遗嘱话题">
        <el-input v-model="props.info.willTopic" />
      </el-form-item>
      <el-form-item label="遗嘱消息">
        <el-input v-model="props.info.willPayload" type="textarea" :rows="6" resize="none" />
      </el-form-item>
      <el-form-item label="遗嘱QoS">
        <el-select v-model="props.info.willQoS" style="width: 96px;">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="遗嘱持久化">
        <el-switch v-model="props.info.willRetain" />
      </el-form-item>
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
:deep(.server-ip) {
	.el-input-group__append {
		padding: 0;
	}
	.ip-separator {
		font-size: 16px;
		margin: 0 8px;
	}
}
.will-set {
  height: 300px;
}
.will-enter-active, .will-leave-active {
  transition: all .2s ease;
  overflow: hidden;
}
.will-enter-from, .will-leave-to {
  height: 0 !important;
  opacity: 0;
}
</style>